<template>
    <div class="ScreenChartManage-center">
        <rx-dialog @ok="handleSubmit" @cancel="cancel" toolbarPlace="top">
            <template #leftToolbar>
                <div style="width:calc( 100% - 100px)">
                    <a-form ref="form" :model="mdl" :rules="rules">
                        <a-row :gutter="24">
                            <a-col span="8">
                                <a-form-item :label="$ti18('rxForm.name','名称')"  prop="name">
                                    <lang-input v-model="mdl.name" :placeholder="$ti18('rxForm.name','名称','','input')" @blur="getPinyinByName()"></lang-input>
                                </a-form-item>
                            </a-col>
                            <a-col span="8">
                                <a-form-item :label="$ti18('rxForm.rxAlias','别名') " prop="alias" class="x-a-form-model-error">
                                    <a-input :placeholder="$ti18('rxForm.rxAlias','别名','','input') " v-model:value="mdl.alias"/>
                                </a-form-item>
                            </a-col>
                            <a-col span="8">
                                <a-form-item  :label="i18n('form.classify','分类')" prop="categoryId">
                                    <rx-category-select cat-key="SCREEN" :isGrant="true"  v-model:value="mdl.categoryId" :appId="appId"></rx-category-select>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </template>
            <div class="formCustomized-common" >
                <div class="rightDesign" v-if="config">
                    <ChartDef :key="viewKey" :config="config" :curComponent="curComponent" :showAdvanced="false"></ChartDef>
                </div>
                <div class="chart-view-common" >
                    <div class="chart-view-common-type">
                        <div :class="config.chartType ==obj.chartType?'chart-view-common-show chart-view-common-type-list':'chart-view-common-type-list'"
                             v-for="obj in chartTypes" :key="obj.chartType" @click="setChart(obj.chartType)">
                            <div v-if="config.chartType ==obj.chartType" class="dragiconfont">
                                <rx-icon-show size="15px" icon="icon-linedui"/></div>
                            <rx-icon-show size="30px" :icon="obj.icon"/>
                            <span :title="obj.title" class="chart-view-common-name">{{ obj.title }}</span>
                        </div>
                    </div>
                    <div class="chart-view-config" style="background-color: #b6b1b1">
                        <chart-view v-if="config" :key="viewKey" :config="config"></chart-view>
                    </div>
                </div>
            </div>
        </rx-dialog>
    </div>
</template>

<script>
import ScreenChartManageApi from '@/api/screen/core/screen-chart-manage.js';
import {Util,RxDialog} from '@lowcode/jpaas-base-lib';
import {mapState} from 'pinia';
import useMain from "../../../../stores/use-main";
import { RxCategorySelect } from '@lowcode/jpaas-share-component';
import ScreenApi from "../../../../api/screen-api";
import ScreenChartManageFunc from "./js/screen-chart-manage-func.js"
import ChartDef from "@/views/modules/design/right-component/chart-def.vue"
import ChartView from "@/views/modules/preview/components/chart-view.vue"
import LangInput from "@/langauge-input/lang-input.vue";

export default {
    name: "ScreenChartManage",
    components: {
        RxDialog,
        RxCategorySelect,
        ChartDef,
        ChartView,
        LangInput
    },
    mixins:[ScreenChartManageFunc],
    props: {
        pkId:{},
        destroy:{
            type:Function
        },
    },
    computed: {
        ...mapState(useMain, ["appId"])
    },
    data() {
        return {
            mdl: {
                name: "",
                alias: "",
                categoryId: "",
                config:"",
                appId:""
            },
            rules: {
                name: [{ required:true,message:this.i18n('msa.nameMsa', '请输入名称'), trigger: 'change' }],
                alias: [
                    { required:true,message:this.i18n('msa.aliasMsa', '请输入别名'), trigger: 'change' },
                    {pattern:/^[a-zA-Z][a-zA-Z0-9_-]*$/,message:this.i18n('msa.str','不能以数字开头,不能包含【_-】以外的特殊字符！','input')}
                ],
                categoryId: [{ required:true,message:this.i18n('msa.selectTips','请选择分类'), trigger: 'change' }],
            },
        }
    },
    created() {
        if(this.pkId){
            this.get(this.pkId)
        }else {
            this.initConfig("generalBar");
        }
    },
    methods: {
        get(id){
            ScreenChartManageApi.get(id).then(res => {
                if(res.success){
                    this.mdl=res.data;
                    this.config=this.mdl.config?JSON.parse(this.mdl.config):""
                }
            });
        },
        isString(value) {
            return typeof value === 'string';
        },
        handleSubmit(vm) {
            let self=this;
            if(this.appId && !this.mdl.appId){
                this.mdl.appId=this.appId;
            }
            if(!self.isString(self.mdl.name)){
                self.mdl.name = JSON.stringify(self.mdl.name)
            }
            this.$refs.form.validate().then(() => {
                self.mdl.config=JSON.stringify(self.config);
                ScreenChartManageApi.save(self.mdl).then(res => {
                    if(res.success){
                        Util.closeWindow(self, 'ok');
                    }else {
                        this.$message.error(res.message);
                        vm.loading=false;
                    }
                }).catch(() => {
                    vm.loading = false;
                });
            }).catch(() => {
                vm.loading = false;
            });
        },
        cancel() {
            Util.closeWindow(this, 'cancel');
        },
        getPinyinByName(){
            let name=this.mdl.name['zh-CN']
            if (!name){
                return;
            }
            if (this.mdl.alias){
                return;
            }
            ScreenApi.getPinyin(name).then(res => {
                //去除不可见的特殊符号
                if(res){
                    res=res.replace(/\u200B/g,'');
                }
                this.mdl.alias=res;
            })
        },
    },
    watch: {},
}
</script>

<style scoped>
/*别名错误样式*/
.x-a-form-model-error ::v-deep .ant-form-item-explain-error{
    position: absolute;
    white-space: nowrap;
    z-index: 9;
    min-height: 0!important;
}
.x-a-form-model-error{
    margin: 0!important;
}
/*别名错误样式end*/
.chart-view-common{
    display: flex;
    flex-direction: column;
}
.chart-view-config{
    flex: 1;
    margin: 10px 0px 10px 10px;
    overflow: hidden;
    border-radius: 10px;
}
.formCustomized-common{
    width: 100%;
    height: 100%;
    display: flex;
    padding:0px 10px;
    box-sizing: border-box;
}
.formCustomized-common >div:nth-child(1){
    width: 430px!important;
    border-right: 1px solid #dadde0;
    border-left: none;
    padding:0px 10px 10px 0px!important;
    overflow: auto;
}
.formCustomized-common >div:nth-child(2){
    overflow: auto;
    flex: 1;
}
.chart-view-common-type-list{
    width: 69px;
    height: 69px;
    background-color: #ffffff;
    margin-right: 10px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}
.chart-view-common-show{
    border: solid 1px #5b8fff;
}
.chart-view-common-type-list:hover{
    border: solid 1px #5b8fff;
}
.chart-view-common-type-list span{
    text-align: center;
    font-size: 12px;
    color: #808080;
    margin-top: 10px;
}
.chart-view-common-name{
    text-align: center;
    font-size: 12px;
    color: #808080;
    margin-top: 10px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    padding: 0px 5px;
}
.chart-view-common-type{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-items: center;
    margin-left: 20px;
}
.dragiconfont {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 17px;
    width: 17px;
    border: 10px solid;
    border-color: #5b8fff #5b8fff transparent transparent;
}

.dragiconfont>>>span{
    margin-top: -11px;
    color: white;
    position: absolute;
}
.ScreenChartManage-center>>>.rx-dialog-toolbar{
    display: flex!important;
}
.ScreenChartManage-center{
    height: 100%;
}
.ScreenChartManage-center>>>.ant-select-selection-item{
    text-align: left;
}
</style>
